<template>
  <v-container>
    <v-row>
      <v-col cols="12" md="8">
        <v-row>
          <v-col class="text-h6">
            <span>联系人详情</span>
            <span class="text--secondary text-body-2 ml-2"
              >ID: {{ currentPerson.PersonId || "Null" }}</span
            >
          </v-col>
        </v-row>
        <PersonalForm v-model="currentPerson" @save="onSave" @clear="onClear" />
      </v-col>

      <v-col cols="12" md="4">
        <v-row>
          <v-col class="text-h6" md="6">
            联系人列表
          </v-col>
          <v-col class="text-h6" md="6">
            <v-btn class="success mr-2" @click="loadPeople">加载</v-btn>
            <v-btn class="info" @click="onPersonNew">新建</v-btn>
          </v-col>
        </v-row>
        <v-row>
          <v-col>
            <PeopleList
              :people="people"
              @edit="onPersonEdit"
              @delete="onPersonDelete"
            />
          </v-col>
        </v-row>
      </v-col>
    </v-row>
  </v-container>
</template>

<script lang="ts">
import PersonalForm from "./PersonalForm.vue";
import { DefaultPersonState, PersonState } from "@/State/PersonState";
import { Component, Vue } from "vue-property-decorator";
import { Database } from "@/Database/Database";
import { PersonRecord } from "@/Types/Types";
import { PersonTableBuilder } from "@/Utils/PersonTableBuilder";
import PeopleList from "@/components/PeopleList.vue";
import { IRecordState, RecordState } from "@/State/RecordState";
import { IDBuilder } from "@/Utils/IDBuilder";

@Component({
  components: { PersonalForm, PeopleList }
})
export default class PersonalDatabase extends Vue {
  private people: PersonState[] = [];
  private currentPerson: PersonState;
  private dataLayer: Database<PersonRecord>;

  constructor() {
    super();

    this.currentPerson = new DefaultPersonState();
    this.dataLayer = new Database<PersonRecord>(PersonTableBuilder.Build());
  }

  private onPersonDelete(state: PersonState) {
    this.deletePerson(state.PersonId);
  }

  private async deletePerson(personId: string) {
    const foundPerson = this.people.find((element: PersonState) => {
      return element.PersonId === personId;
    });
    if (!foundPerson) {
      return;
    }
    const personState: IRecordState = new RecordState();
    personState.IsActive = false;
    const state: PersonRecord = { ...foundPerson, ...personState };
    await this.dataLayer.Update(state);
    this.loadPeople();
  }

  private loadPeople() {
    this.people = new Array<PersonRecord>();
    this.dataLayer.ReadAll().then(people => {
      this.people = people;
    });
  }

  private clear() {
    this.currentPerson = new DefaultPersonState();
  }
  onSave() {
    console.log("save");
    const personState: IRecordState = new RecordState();
    personState.IsActive = true;
    const state: PersonRecord = { ...this.currentPerson, ...personState };
    if (state.PersonId === "") {
      console.log(state);
      state.PersonId = IDBuilder.GetIDString();
      this.dataLayer.Create(state);
      this.loadPeople();
      this.clear();
    } else {
      this.dataLayer.Update(state).then(rsn => this.loadPeople());
    }
  }

  private onClear() {
    this.clear();
  }

  private onPersonEdit(state: PersonState) {
    this.currentPerson = state;
  }

  private onPersonNew() {
    this.clear();
  }
}
</script>

<style></style>
